<template>
  <span @click="handleClick">打开实时路况</span>
</template>

<script setup>
import { toRefs } from 'vue'
import { useMapStore } from '@/stores/map' // 使用pinia
const { map } = toRefs(useMapStore())

function handleClick() {
  const trafficArr = [
    { where: '车流量>500 and 车流量<=1000', color: 'rgba(0, 245, 0, 0.8)' },
    { where: '车流量>1000 and 车流量<=1500', color: 'rgba(245, 100, 3, 0.8)' },
    { where: '车流量>1500 and 车流量<=2000', color: 'rgba(255, 0, 0, 0.8)' }
  ]
  let service = { name: 'guanggu', layerId: 1 }
  trafficArr.forEach((item) => {
    let where = item.where
    let color = item.color
    Query.queryByAttr({
      where,
      service,
      callback: (data) => {
        //初始化Zondy.Format.PolygonJSON类
        var format = new Zondy.Format.PolygonJSON()
        //将MapGIS要素JSON反序列化为ol.Feature类型数组
        var features = format.read(data)
        //实例化一个矢量图层drawLayerr用于高亮显示结果
        var drawSource = new ol.source.Vector({
          wrapX: false
        })
        drawSource.addFeatures(features)
        var drawLayer = new ol.layer.Vector({
          title: 'trafficArr',
          source: drawSource,
          style: new ol.style.Style({
            // //填充色
            // fill: new ol.style.Fill({
            //   color: color
            // }),
            //边线样式
            stroke: new ol.style.Stroke({
              color: color,
              width: 20
            })
          })
        })
        let layerArr = map.value.getLayers().getArray()
        let layersfilter = layerArr.filter((item) => {
          return item.values_.title == 'trafficArr'
        })
        if (layersfilter.length < 3) {
          map.value.addLayer(drawLayer)
        } else {
          layersfilter.forEach((item) => {
            item.setVisible(true)
          })
        }
      }
    })
  })
}
</script>
<style scoped></style>
